/** 
  课程成绩信息
*/
<template>
  <div class="apply-change-score-container">
    <div style="height: 40px;">
      <el-breadcrumb separator="/" class="float-left" style="padding-top: 8px;">
        <el-breadcrumb-item :to="{ path: '/studentPerformMaintain' }">
          <span @click="backToMain()">{{ $t('studentPerformMaintain.studentPerformMaintain') }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('scoreMangementBase.select') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="float-right">
        <el-button type="text" @click="backToMain()">{{ $t('common.btn.back') }}</el-button>
      </div>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">{{ $t('studentPerformMaintain.studentGradeInfo') }}</div>
      <div class="sub-container">
        <h3 class="sub-container-title">{{ $t('studentPerformMaintain.individualScoreInfo') }}</h3>
        <table class="table-style-baseinfos">
          <tbody>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.studentId') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.studentId }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.studentName') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.studentName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.college') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.facultyI18n }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.trainingLevel') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.trainingLevelI18n }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseNum') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseNum }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseCode') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseCode }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseName') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseName }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseCategory') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.learnTypeI18n }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('courseScoreMana.postStatus') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.releaseTypeName }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.semester') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.calendarYearTermCn }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('gradeRelatedSetting.gradeRecordMethod') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.scoreRecordTypeI18n }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.credit') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.credit }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('gradeRelatedSetting.gradePoint') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.gradePoint }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.grade') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.scoreValue }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.isPass') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.isPassName }}</td>
              <td class="text-right-background-color">{{ $t('courseScoreMana.entryPerson') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importUser }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.entryTime') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importTime }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.editTime') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importUpdatedTime }}</td>
            </tr>
          </tbody>
        </table>
        <h3 class="sub-container-title">{{ $t('scoreEntryMana.scoreList') }}</h3>
        <EduTable
          :order="false"
          :selection="false"
          :border="true"
          :pagination="false"
          :header-cell-style="{ background: '#EDF1F5' }"
          :data="basicInfo.minorScoreDetailList">
          <edu-table-column min-width="100" align="center" prop="scoreTypeI18n" :label="$t('studentPerformMaintain.gradeType')"></edu-table-column>
          <edu-table-column prop="scoreRecordTypeI18n" min-width="100" align="center" :label="$t('gradeRelatedSetting.gradeRecordMethod')"></edu-table-column>
          <edu-table-column prop="scoreExamTypeI18n" min-width="100" align="center" :label="$t('scoreChangeApply.examNature')"></edu-table-column>
          <edu-table-column :label="$t('scoreEntryMana.percentage')" min-width="80" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.scorePercent ? scope.row.scorePercent + '%' : '' }}</span>
            </template>
          </edu-table-column>
          <edu-table-column prop="scoreValue" min-width="60" :label="$t('scoreMangementBase.grade')" align="center"></edu-table-column>
          <edu-table-column prop="importUpdatedTime" min-width="150" :label="$t('scoreMangementBase.updateTime')" align="center"></edu-table-column>
          <edu-table-column prop="scoreChangeReason" min-width="150" :label="$t('scoreMangementBase.editReason')" align="center"></edu-table-column>
        </EduTable>
      </div>
    </el-card>
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
export default {
  components: {
  },
  data () {
    return {
      basicInfo: {}
    }
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  created() {

  },
  mounted() {
    scoreManagementApi.queryCourseScoreInfoById(this.detailInfo).then(res => {
      if (res.code === 200) {
        this.basicInfo = res.data
      }
    })
  },
  methods: {
    // 返回主页
    backToMain() {
      this.$emit('refresh-main-page')
    },
  }
}
</script>

<style lang="scss" scoped>
  .apply-change-score-container ::v-deep {
    .title {
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 18px;
    }
    .table-style-baseinfos {
      border-collapse: collapse;
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
    }
    .table-style-baseinfos .text-right-background-color {
      background-color: #edf1f5;
      text-align: right;
    }
    .text-left-background-none {
      text-align: left;
    }
    .table-style-baseinfos td {
      width: 25%;
      background-color: rgba(255, 255, 255, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #2b3b4e;
      height: 32px;
      padding: 0 10px;
    }
    .sub-container {
      padding: 0 20px;
      .sub-container-title {
        margin-bottom: 20px;
        font-size: 16px;
      }
    }
  
  }
</style>